<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>homework</title>
    <script src="./vue.js"></script>
    <style>
        .all {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #app {
            width: 100%;
            /*  height: 700px; */
            /* background-color: red; */
        }

        .todolist {
            width: 27%;
            /*  height: 620px; */
            flex-wrap: wrap;
            background-color: rgb(245, 212, 138);
            border-radius: 10px;
            margin-bottom: 10px;
        }

        .todoTitle {
            width: 100%;
            height: 70px;
            color: white;
            font-size: 40px;
            /*            background-color: greenyellow; */
        }

        .todoContent {
            width: 90%;
            height: 300px;
            flex-wrap: wrap;
            border-radius: 12px;
            background-color: rgb(251, 247, 232);
        }

        .name {
            width: 100%;
            height: 9%;
        }

        .color {
            width: 100%;
            height: 17%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            /* background-color: gold; */
        }

        .commenColor {
            width: 30px;
            height: 30px;
            border-radius: 50%;
        }

        .bigColor {
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }

        .inp {
            width: 100%;
            height: 97%;
            border: none;
            margin: 0;
            padding: 0;
        }

        input::-webkit-input-placeholder {
            color: rgb(217, 159, 68);
            padding: 10px;
        }

        .inp :focus {
            border: none
        }

        .time {
            width: 100%;
            height: 15%;
            /* background-color: darkorchid; */
        }

        .thame {
            width: 100%;
            height: 15%;
            /*  background-color: sienna; */
        }

        .work {
            width: 100%;
            height: 30%;
            /* background-color: sandybrown; */
        }

        .add {
            width: 94%;
            height: 15%;
            color: white;
            border-radius: 8px;
            /* margin: 10px 0px 10px 0px ; */
            background-color: rgb(222, 158, 113);
        }

        .todoWork {
            width: 90%;
            flex-wrap: wrap;
            margin-top: 30px;
            /*    height: 270px; */
            /*  background-color: slateblue; */
        }

        .oneList {
            width: 100%;
            height: 100px;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            /*  background-color: darksalmon; */
            margin-bottom: 10px;
            /* font-size: large; */
        }

        .oneTitle {
            width: 100%;
            height: 35%;
            padding: 0 10px 0px 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            /*      background-color: crimson; */
            margin: 0;
            color: rgb(96, 86, 149)
        }

        .oneContent {
            width: 100%;
            height: 65%;
            border-top: 0.5px solid white;
            padding: 10px;
            color: white;
        }
    </style>
</head>

<body>
    <div id="app" class="all">
        <div class="todolist all">
            <div class="todoTitle all">Todo List</div>
            <div class="todoContent all">
                <!-- <div class="name">添加任务</div> -->
                <div class="color ">
                    <div v-for="(item,index) in color" :style="{'background-color': item.type}"
                        :class="[index == colorIndex ? 'bigColor': 'commenColor']" v-on:click="colorF(index)"></div>
                </div>
                <div class="time">
                    <input type="text" v-model="time" class="inp" placeholder="活动时间">
                </div>
                <div class="thame">
                    <input type="text" v-model="thame" class="inp" placeholder="活动主题">
                </div>
                <div class="work">
                    <!--                 <textarea rows="5" cols="15" v-model="content" class="inp" placeholder="活动内容"></textarea>
 -->
                    <input type="text" v-model="content" class="inp" placeholder="活动内容">

                </div>
                <div class="add all" @click="add">添加</div>
            </div>
            <div class="todoWork all">
                <!-- <div>代办任务</div> -->
                <div class="oneList" v-for="(item, index) in todoList" :style="{'background-color': item.color}">
                    <div class="oneTitle">
                        <div>{{item.thame}}</div>
                        <div>{{item.time}}</div>
                    </div>
                    <!--   <hr> -->
                    <div class="oneContent">
                        {{item.content}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                colorIndex: 0,
                time: '',
                thame: '',
                content: '',
                todoList: [],
                color: [
                    {
                        type: 'rgb(165,214,247)',
                        event: 'color1'
                    },
                    {
                        type: 'rgb(237,127,111)',
                        event: 'color2'
                    },
                    {
                        type: 'rgb(159,222,195)',
                        event: 'color3'
                    },
                    {
                        type: 'rgb(241,181,67)',
                        event: 'color4'
                    },
                    {
                        type: 'rgb(222, 158, 113)',
                        event: 'color5'
                    },
                ],
                gos: 'red',
            },
            methods: {
                colorF(index) {
                    this.colorIndex = index
                },
                add() {
                    let obj = {};
                    obj.time = this.time;
                    obj.thame = this.thame;
                    obj.content = this.content;
                    obj.color = this.color[this.colorIndex].type
                    this.todoList.push(obj);
                    console.log(obj);
                    console.log(this.todoList)
                },

            }
        })
    </script>
</body>

</html>